import { ref,onMounted, Ref,watch,onUnmounted ,nextTick } from 'vue'
import ApiTree from '~/api/ApiTree';
import CEvent from '~/utils/CEvent';
import StrUtil from '~/utils/StrUtil';
import System from '~/utils/System';

export default class VueTreeMain {

    static that:VueTreeMain

    filterText:Ref<string> = ref('')

    expandedData:Ref<Array<any>> =  ref([
    ])

    static expandedDataTemp:Array<any> = []//点击展开日志

    tableData:Ref<Array<any>> =  ref([
    ])

    tableDataLoading:Ref<boolean> = ref(true)

    chooseList:Array<any> = []//可选父级菜单
    
    defaultProps:Ref<any> =  ref({
        children: 'children',
        label: 'name',
    })

    constructor(){

        VueTreeMain.that = this

        onMounted(()=>{
            this.getList()
            CEvent.on("VuTreeMainGetList",()=>{
                console.log(StrUtil.cp(this.expandedData.value));
                this.getList()
            })
        })

        onUnmounted(()=>{
            CEvent.off("VuTreeMainGetList")
        })

        watch(this.filterText, (newCount:any, newRefCount:any) => {
            System.$refs['userTree'].value.filter(newCount)
        })

    }

    /**
     * 获取列表
     */
    async getList(){
        
        VueTreeMain.that.tableDataLoading.value = true
        await ApiTree.getList().then((data:any)=>{
            this.tableData.value = data.data.list
            if(VueTreeMain.expandedDataTemp.length > 0){
                this.expandedData.value = StrUtil.cp(VueTreeMain.expandedDataTemp)
            }else{
                let expandedDataArr:any = []
                expandedDataArr.push(this.tableData.value[0].id)
                // if(this.tableData.value[0].children.length > 0)
                //     expandedDataArr.push(this.tableData.value[0].children[0].id)
                this.expandedData.value = expandedDataArr
            }
            this.chooseList = []
            this.getChooseArr(this.tableData.value)
            VueTreeMain.that.tableDataLoading.value = false
            
        }).catch((e:any)=>{
            console.log(e);
            VueTreeMain.that.tableDataLoading.value = false
        })
    }

    /**
        获取可选分组列表
     */
    getChooseArr(arrT:any){
        for (let i = 0; i < arrT.length; i++) {
            if(arrT[i].type == "group"){
                this.chooseList.push({
                    label:arrT[i].name,
                    value:arrT[i].id
                })
            }
            if(!StrUtil.isNull(arrT[i].children)){
                this.getChooseArr(arrT[i].children)
            }
        }
    }


    /**
        点击反馈
     */
    handleNodeClick(data:any,data1:any,data2:any){
        if(data1.expanded){
            VueTreeMain.expandedDataTemp = StrUtil.getParentFieldArr("id",data.id,VueTreeMain.that.tableData.value[0],"children")
        }
    }

    /**
        关键词筛选
     */
    filterNode(value:any, data:any) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }

}